<template>
	<view>
		<view class="gradient-bg">
			<image :src="myBgSrc" class="wdbg" mode="cover"></image>
			<view v-if="list.length>0" class="" style="width: 92%;margin: 0rpx auto;position: absolute;z-index: 100;top: 0;left: 4%;">
				<view style="color: #000;font-size: 32rpx;line-height: 70rpx;margin-top: 40rpx;margin-bottom: 30rpx;">
					<text style="font-weight: bold;">Hi~，有什么可以帮您!</text><br>
					<text style="color: #666;">懂鲜为您服务</text>
				</view>
				<view style="width: 100%;background-color: #ffffff;border-radius: 16rpx;box-sizing: border-box;">
					<view style="color: #333;font-size: 32rpx;line-height: 100rpx;font-weight: bold;padding-left: 40rpx;">
						常见问题
					</view>
					<view @click="wen(item.id)" v-for="(item,index) in list" :key='index' style="line-height: 100rpx;box-sizing: border-box;padding-right: 50rpx;color: #333333;font-size: 28rpx;position: relative;border-bottom: 1px solid #eeeeee;width: 88%;margin: 0 auto;" class="yihang">
						{{item.title}}<text style="position: absolute;top: 50%;right: 0;transform: translateY(-50%);color: #cccccc;" class="iconfont icon-xiangyou"></text>
					</view>
				</view>

				<view style="width: 100%;padding: 30rpx 50rpx;background-color: #ffffff;overflow: hidden;box-sizing: border-box;position: fixed;left: 0;bottom: 0;border-top-left-radius: 30rpx;border-top-right-radius: 30rpx;">
					<button type="default" @click="da" style="width: 50%;float: left;background-color: #ffffff;display: flex;justify-content: center;">
						<view class="flex items-center"  style="text-align: center;">
							<image :src="myphoneSrc" style="width: 60rpx;height: 60rpx;margin: 0 20rpx 0 0;float: left;" mode=""></image>
							<text style="color: #262D2C;font-size: 28rpx;line-height: 30rpx;">电话客服</text>
						</view>

					</button>
					<button @click="toOnlineService" type="default" open-type="contact" style="width: 50%;float: left;background-color: #ffffff;display: flex;justify-content: center;">
						<view  class="flex items-center" style="text-align: center;">
							<image :src="mywhatSrc" style="width: 60rpx;height: 60rpx;margin: 0 20rpx 0 0;float: left;" mode=""></image>
							<text style="color: #262D2C;font-size: 28rpx;line-height: 30rpx;">在线客服</text>
						</view>

					</button>
				</view>
				<!-- <view style="line-height: 60rpx;text-align: center;font-size: 28rpx;color: #666;">
					客服工作时间周一至周五9:00-18:00
				</view> -->
			</view>
		</view>
		<callPhone ref="callPhone"/>
	</view>
</template>

<script>
	import isAuditIos from '@/common/isAuditIos.js'

	export default{
		mixins: [isAuditIos],

		data(){
			return{
				myBgSrc: require('@/static/my/bg1.png'),
				myphoneSrc: require('@/static/my/ic_contact.png'),
				mywhatSrc: require('@/static/my/ic_link.png'),
				background:{ background: 'linear-gradient(180deg, #0078FF 0%, #1fb0ac 100%)' },
				work:{},
				list:[],
				mobile:''
			}
		},
		onLoad() {
			this.wenti()
			this.dian()
			// this.wo()
		},
		onPullDownRefresh() {
			this.wenti()
			// this.wo()
		       setTimeout(function () {
		           uni.stopPullDownRefresh();
		       }, 1500);
		  },
		methods:{
			toOnlineService() {
				// uni.setStorageSync('friend_id', 6148)
				// uni.setStorageSync('friend_name','懂鲜')
				// uni.navigateTo({
				// 	url: `/im/chat/chat?conversationID=C2C13917049216`,
				// })
				this.post('api/im/im/friend_msg',{client_id:0,client_mobile:13917049216},true).then(res=>{
					if(res.code==1){
						uni.setStorageSync('friend_id',res.data.friend_id)
						uni.setStorageSync('friend_name','懂鲜')
						uni.navigateTo({
								url: `/im/chat/chat?conversationID=C2C13917049216`,
						})
					}else if(res.code==211){
						if (this.iosUpAppStore) {
							uni.showModal({
								title: '提示',
								content: res.msg,
								success (res1) {
									if (res1.confirm) {
										uni.navigateTo({
											url:'../../../subpages/pages/vip'
										})
									} else if (res1.cancel) {

									}
								}
							});
						}
					}
					else{
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
					}
				})
			},
			dian:function(){
				this.post('api/index/site','',true).then(res=>{
					console.log(res)
					if(res.code==1){
						this.mobile=res.data.service_mobile
					}
				})
			},
			// 增加访问量
			yang:function(){
				this.post('api/homepage/pageviews',{path:'/subpages/pages/lianxi'},true).then(res=>{
					console.log(res)
				})
			},
			back:function(){
				uni.navigateBack({
					delta:1
				})
			},
			// 问题列表
			wenti:function(){
				this.post('api/index/problem','',true).then(res=>{
					console.log(res)
					if(res.code==1){
						this.list=res.data
					}
				})
			},
			// 联系我们
			wo:function(){
				this.post('api/help/contact','',true).then(res=>{
					console.log(res)
					if(res.code==1){
						this.work=res.data
					}
				})
			},
			da:function(){
				let that=this
				this.callPhone(this.mobile)
				// uni.makePhoneCall({
				//     phoneNumber: that.mobile //仅为示例that.work.mobile
				// });
			},
			callPhone(phoneNumber) {
				console.log(phoneNumber)
				this.$refs.callPhone.open(phoneNumber)
			},
			wen:function(id){
				uni.navigateTo({
					url:'bzzxxq?id='+id+'&index='+1
				})
			}

		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F5F5F5!important;
		font-family: Demibold;
	}
	.gradient-bg{
		width: 750rpx;
		height: 366rpx;
		position: relative;
		z-index: 99;
	}
	.wdbg {
		width: 100%;
		height: 566rpx;
	}
	.slot-wrap {
			display: flex;
			align-items: center;
			/* 如果您想让slot内容占满整个导航栏的宽度 */
			/* flex: 1; */
			/* 如果您想让slot内容与导航栏左右有空隙 */
			padding: 0 30rpx;
		}
		button {
			border: none;
			background-color: none;
		}
		button[type=default]{
			border: none;
			background-color: none;
		}
		button:after{
			border: none;
			background-color: none;
		}
</style>

